<script lang="ts">
import { defineComponent, onMounted, ref, watch, computed } from "vue";
import { showToast, showDialog, showConfirmDialog } from "vant";
import {
    getaccountresource,
    getEnergyAddrList,
    getParameter,
    createtransaction,
    insertPreRent,
    updatePreRent,
} from "@/api";
import { UserModule } from "@/store/modules/user";
import { useI18n } from "vue-i18n";
import axios from "axios";
export default defineComponent({
    setup() {
        const { t } = useI18n();
        const amount = ref();
        const loading = ref(false);
        const pageLoading = ref(true);
        const pageLoading2 = ref(true);
        const time = ref(30);
        const timeIndex = ref(-1);
        const address = ref();
        const amountList = ref([64400, 130400, 200000, 1000000]);
        const balance = ref();
        const energy = ref(0);
        const energy2 = ref(0);
        const timeList = ref([
            {
                day: 30,
                min: 1800,
                unit: "minutes",
                label: "Min30",
                index: -1,
            },
            {
                day: 1,
                min: 3600,
                unit: "hours",
                label: "Hour1",
                index: 0,
            },
            {
                day: 1,
                unit: "days",
                label: "Day1",
                index: 1,
            },
            {
                day: 3,
                unit: "days",
                label: "Day2",
                index: 3,
            },
            {
                day: 10,
                unit: "days",
                label: "Day2",
                index: 10,
            },
        ]);
        const accountresource = ref();
        const energyLimit = ref({});
        const rentParameter = ref({});
        const onSubmit = async () => {
            var orderId;
            try {
                loading.value = true;
                console.log(Number(fromSun.value(balance.value)));
                // if (
                //     SUM.value(SUN.value) > Number(fromSun.value(balance.value))
                // ) {
                //     showToast({
                //         message: t("layout.InsufficientBalance"),
                //         icon: "clear",
                //         className: "_showToast2",
                //         position: "top",
                //     });
                //     loading.value = false;
                //     return;
                // }
                const Createtransaction = await createtransaction({
                    owner_address: tronWeb.address.toHex(UserModule.userAddr),
                    to_address: tronWeb.address.toHex(
                        rentParameter.value.RentFeeReceiver
                    ),
                    amount: Number(toSun.value(SUM.value(SUN.value))),
                    visible: false,
                });
                console.log("1111111111111111111");
                const insertPreRentRes = await insertPreRent({
                    from_address: UserModule.userAddr,
                    receive_address: address.value,
                    resource_value: amount.value,
                    duration:
                        timeIndex.value < 1
                            ? timeList.value[Number(timeIndex.value) + 1]?.min
                            : 86400 * timeIndex.value,
                    trx_txhash: Createtransaction.data.txID,
                    tx_timestamp: parseInt(
                        Createtransaction.data.raw_data.timestamp / 1000
                    ),
                    tx_expiration: parseInt(
                        Createtransaction.data.raw_data.expiration / 1000
                    ),
                });
                console.log("22222222222222222222", amount.value);
                if (insertPreRentRes.data.code == 20) {
                    console.log("33333333333333333");
                    console.log(Createtransaction.data);
                    orderId = insertPreRentRes.data.data.OrderId;
                    console.log(insertPreRentRes);
                    const transaction =
                        await tronWeb.transactionBuilder.addUpdateData(
                            Createtransaction.data
                        );
                    console.log("444444444444444");

                    console.log(transaction);
                    const signedTransaction = await tronWeb.trx.sign(
                        transaction
                    );
                    // await tronWeb.trx.sendRawTransaction(signedTransaction);
                    // console.log("555555555555");
                    // console.log(signedTransaction, "11111111111111111111");
                    // 广播交易
                    const broadcast = await tronWeb.trx.broadcast(
                        signedTransaction
                    );
                    console.log("666666666666");
                    // console.log(broadcast, "2222222222222222222222");
                    console.log(broadcast);
                    if (broadcast.result) {
                        updatePreRent({
                            orderId: orderId,
                            status: 2,
                        });
                        showToast({
                            message: t("layout.SuccessfulTransaction"),
                            icon: "checked",
                            className: "_showToast",
                            position: "top",
                        });
                    } else {
                        switch (broadcast.code) {
                            case "TRANSACTION_EXPIRATION_ERROR":
                                updatePreRent({
                                    orderId: orderId,
                                    status: 1,
                                });
                                showToast({
                                    message: t("layout.TransactionExpiration"),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;
                            case "CONTRACT_VALIDATE_ERROR":
                                updatePreRent({
                                    orderId: orderId,
                                    status: 1,
                                });
                                showToast({
                                    message: t("layout.InsufficientBalance"),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;

                            default:
                                showToast({
                                    message: t(
                                        "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                                    ),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;
                        }
                    }
                } else {
                    showToast({
                        message: t(
                            "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                        ),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                }
            } catch (error) {
                console.log(error);
                if (orderId) {
                    updatePreRent({
                        orderId: orderId,
                        status: 1,
                    });
                    showToast({
                        message: t("layout.TransactionCancelled"),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                } else {
                    showToast({
                        message: t(
                            "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                        ),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                }
            }
            loading.value = false;
        };
        const loadData = async () => {
            try {
                // getaccountresource({
                //     address: "TDPpCF6A63Vk1hm69c1SYUGRmLkq8jCL5j",
                //     visible: true,
                // }).then((res) => {
                //     accountresource.value =
                //         res.data.EnergyLimit - (res.data.EnergyUsed || 0);
                //     energyLimit.value = res.data;
                // });

                await getParameter().then((res) => {
                    rentParameter.value = res.data.data.RentParameter;
                });
                await tronWeb.trx
                    .getBalance(UserModule.userAddr)
                    .then((res) => {
                        balance.value = res;
                    });
                pageLoading.value = false;
            } catch (error) {}
        };
        const validatorMessage1 = (val) => {
            if (
                Number(val) < rentParameter.value.MinBuyEnergy ||
                Number(val) > accountresource.value
            ) {
                return false;
                return `${t("layout.Single")} ${
                    rentParameter.value.MinBuyEnergy || 0
                } ~ ${accountresource.value || 0} `;
            } else {
                return true;
            }
        };
        const setTime = (item, index) => {
            if (index < 2) {
                timeIndex.value = index - 1;
            } else {
                timeIndex.value = item.day;
            }
        };
        const changeStepper = (data) => {
            if (timeIndex.value < 1) {
                time.value = timeList.value[Number(timeIndex.value) + 1].day;
            } else {
                time.value = data;
            }
        };
        const blurField = () => {
            if (time.value > 30) {
                timeIndex.value = 30;
                time.value = 30;
            } else {
                timeIndex.value = time.value;
            }
        };
        const SUN = computed(() => {
            return rentParameter.value[
                timeList.value[Number(timeIndex.value) + 1]?.label || "Day2"
            ];
        });
        const SUM = computed(() => {
            return (sun) => {
                if (timeIndex.value < 1) {
                    return (amount.value * sun) / 1000000 || 0;
                } else {
                    return (
                        (timeIndex.value * (amount.value * sun)) / 1000000 || 0
                    );
                }
            };
        });
        const fromSun = computed(() => {
            return (data) => {
                return tronWeb.fromSun(data);
            };
        });
        const toSun = computed(() => {
            return (data) => {
                return tronWeb.toSun(data);
            };
        });
        onMounted(async () => {
            energy.value = 0;
            energy2.value = 0;
            let num1 = 0;
            let num2 = 0;
            let num3 = 0;
            accountresource.value = 0;
            getEnergyAddrList().then(async (res) => {
                if (res.data.code == 20) {
                    for (
                        let index = 0;
                        index < res.data.data.EnergyAddrList.length;
                        index++
                    ) {
                        const element = res.data.data.EnergyAddrList[index];
                        num1 = num1 + element.TotalEnergy;
                        const resource = await getaccountresource({
                            address: element.Address,
                            visible: true,
                        });
                        const _Energy =
                            resource.data.EnergyLimit -
                            (resource.data.EnergyUsed || 0);
                        num2 = num2 + _Energy;
                        if (num3 < _Energy) {
                            num3 = _Energy;
                        }
                    }
                    accountresource.value = num3;
                    pageLoading2.value = false;
                }
                energy.value = num1;
                energy2.value = num2;
            });
        });
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    console.log(UserModule.userAddr);
                    loadData();
                    address.value = newUserAddr;
                }
            },
            { immediate: true }
        );
        return {
            amount,
            time,
            address,
            amountList,
            timeList,
            timeIndex,
            accountresource,
            energyLimit,
            energy,
            energy2,
            rentParameter,
            SUN,
            SUM,
            fromSun,
            toSun,
            pageLoading,
            pageLoading2,
            loading,
            changeStepper,
            setTime,
            blurField,
            validatorMessage1,
            onSubmit,
        };
    },
});
</script>

<template>
    <div class="main2">
        <div class="page">
            <van-form @submit="onSubmit">
                <div class="titleNmae name">
                    {{ $t("layout.page13") }}
                    <div class="right">
                        {{ $t("layout.AmountAvailableForPurchase") }}
                        <span>{{ accountresource || 0 }}</span>
                    </div>
                </div>
                <div class="name name2">
                    <div class="dc">
                        {{ $t("layout.EnergyQuantity") }}
                        <span
                            >*
                            {{
                                `${$t("layout.Single")} ${
                                    rentParameter.MinBuyEnergy || 0
                                } ~ ${accountresource || 0}`
                            }}</span
                        >
                    </div>
                </div>
                <div class="row">
                    <van-field
                        v-model="amount"
                        type="digit"
                        :placeholder="$t('layout.PleaseEnterTheEnergyQuantity')"
                        :rules="[
                            {
                                required: true,
                                // message: $t(
                                //     'layout.PleaseEnterTheEnergyQuantity'
                                // ),
                            },
                            { validator: validatorMessage1 },
                        ]"
                    />
                </div>
                <div class="amountList">
                    <span
                        v-for="(item, index) in amountList"
                        :key="index"
                        @click="amount = item"
                    >
                        {{ item }}
                    </span>
                </div>
                <div class="name name2">
                    {{ $t("layout.RentalTime") }}
                </div>
                <div class="row row2">
                    <van-field
                        v-model="time"
                        type="digit"
                        @change="blurField"
                        :placeholder="$t('layout.PleaseEnterTheRentalTime')"
                        :rules="[
                            {
                                required: true,
                                message: $t('layout.PleaseEnterTheRentalTime'),
                            },
                        ]"
                    />
                    <div class="timeBox">
                        <div class="timeright">
                            <span v-if="timeIndex < 1">{{
                                $t(
                                    `layout.${
                                        timeList[Number(timeIndex) + 1].unit
                                    }`
                                )
                            }}</span>
                            <span v-else>{{ $t("layout.days") }}</span>
                            <van-stepper
                                v-model="timeIndex"
                                :decimal-length="0"
                                :min="-1"
                                :max="30"
                                @change="changeStepper"
                            />
                        </div>
                    </div>
                </div>
                <div class="timeList">
                    <span
                        v-for="(item, index) in timeList"
                        :class="{ cuttent: item.index == timeIndex }"
                        :key="index"
                        @click="setTime(item, index)"
                    >
                        {{ item.day }}{{ $t(`layout.${item.unit}`) }}
                    </span>
                </div>
                <div class="name name2">
                    {{ $t("layout.Recipient") }}
                </div>
                <div class="row">
                    <van-field
                        v-model="address"
                        class="address"
                        :placeholder="$t('layout.PleaseEnterTheAddress')"
                        :rules="[
                            {
                                required: true,
                                message: $t('layout.PleaseEnterTheAddress'),
                            },
                        ]"
                    />
                </div>
                <div class="name payName name2">
                    {{ $t("layout.PaymentAmount") }}
                    <div class="pay">
                        <span>{{ SUM(210) }}TRX</span>
                        <div class="value">{{ SUM(SUN) }}TRX</div>
                    </div>
                </div>
                <van-button
                    round
                    block
                    type="primary"
                    :disabled="
                        pageLoading || !amount || !address || pageLoading2
                    "
                    :loading="loading"
                    native-type="submit"
                >
                    {{ $t("layout.Submit") }}
                </van-button>
            </van-form>
            <div class="OperationProcess">
                <div class="title">
                    <span>{{ $t("layout.text73") }}</span>
                </div>
                <ul>
                    <li>
                        <span>1</span>
                        {{ $t("layout.text74") }}
                    </li>
                    <i></i>
                    <li>
                        <span>2</span>
                        {{ $t("layout.text75") }}
                    </li>
                    <i></i>
                    <li>
                        <span>3</span>
                        {{ $t("layout.text76") }}
                    </li>
                    <i></i>
                    <li>
                        <span>4</span>
                        {{ $t("layout.text78") }}
                    </li>
                    <i></i>
                    <li>
                        <span>5</span>
                        {{ $t("layout.text77") }}
                    </li>
                </ul>
            </div>
            <div class="Leasing">
                <!-- <div class="name">
                    <span>{{$t('layout.text63')}}</span>
                    <div class="text">{{$t('layout.text64')}}</div>
                </div> -->
                <ul>
                    <li>
                        <div class="label">{{ $t("layout.text65") }}</div>
                        <div class="text">{{ $t("layout.text66") }}</div>
                    </li>
                    <li>
                        <div class="label">{{ $t("layout.text67") }}</div>
                        <div class="text">{{ $t("layout.text68") }}</div>
                    </li>
                </ul>
            </div>
            <div class="introduce">
                <!-- <div class="title">
                    <span>{{ $t("layout.text69") }}</span>
                </div> -->
                <div class="block">
                    <!-- <div class="content">
                        {{$t('layout.page12')}}
                    </div> -->
                    <ul>
                        <li>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="72"
                                height="72"
                                viewBox="0 0 72 72"
                                fill="none"
                            >
                                <g filter="url(#filter0_d_99_34650)">
                                    <circle
                                        cx="36"
                                        cy="36"
                                        r="30"
                                        fill="url(#paint0_linear_99_34650)"
                                    />
                                </g>
                                <path
                                    d="M43.0957 30.2734C47.2384 33.6189 49.7344 39.1942 49.7344 43.3896C49.7341 49.7613 43.2558 53.2656 35.9316 53.2656C28.604 53.2656 22.1253 49.7613 22.125 43.3896C22.125 39.2476 24.8865 33.619 29.0283 30.2734H43.0957ZM35.3486 35.9717C33.5179 36.2789 32.2677 37.5744 32.2676 39.1934C32.2676 40.8392 33.3832 41.7425 34.5518 42.2207L35.3477 42.5508V45.6523C34.5622 45.4841 33.7423 45.0331 33.1182 44.4502L31.79 45.9912C32.7725 46.9267 34.0431 47.4908 35.3477 47.6484V49.7607H36.5146V47.6572C38.7742 47.4232 40.0703 45.9426 40.0703 44.2383C40.0703 42.5923 39.1674 41.742 37.7871 41.1582L36.5146 40.6123V37.8291C37.2757 37.9056 37.9297 38.2547 38.584 38.7686L39.752 37.335C38.9218 36.5052 37.7317 35.9904 36.5146 35.9131V33.6182H35.3486V35.9717ZM36.5146 43.0381C37.286 43.3737 37.7869 43.6738 37.7871 44.3975C37.787 45.0629 37.3409 45.5417 36.5146 45.6816V43.0381ZM35.3486 40.1074C34.8719 39.8515 34.5518 39.5387 34.5518 39.0342C34.5519 38.4942 34.8458 38.1261 35.3486 37.9443V40.1074ZM42.9375 29.1045H29.1348V27.9365H42.9375V29.1045ZM33.5957 18.75C35.2415 18.7502 35.3477 19.918 35.3477 19.918C35.3495 19.9339 35.6186 22.2012 37.1504 22.2012C37.9456 22.201 38.2113 21.5106 38.2646 20.9795V20.9268C38.3183 20.6615 38.5832 20.4494 38.8486 20.4492H43.4688C43.787 20.4494 44.0527 20.7144 44.0527 21.0332C44.1058 21.8292 44.0524 22.8382 43.7871 23.7939C43.5215 25.2274 43.1492 26.0245 42.9375 26.4492C42.8306 26.6618 42.6178 26.7686 42.4062 26.7686H29.3467C29.1341 26.7684 28.9756 26.6083 28.8691 26.4492C28.6035 25.9707 28.073 24.8028 27.8076 23.3164C27.6485 22.3601 27.7009 21.617 27.7539 21.0332C27.7539 20.7145 28.0192 20.4494 28.3379 20.4492H28.3916C32.3207 20.3428 32.0555 18.75 33.5957 18.75Z"
                                    fill="white"
                                />
                                <defs>
                                    <filter
                                        id="filter0_d_99_34650"
                                        x="0"
                                        y="0"
                                        width="72"
                                        height="72"
                                        filterUnits="userSpaceOnUse"
                                        color-interpolation-filters="sRGB"
                                    >
                                        <feFlood
                                            flood-opacity="0"
                                            result="BackgroundImageFix"
                                        />
                                        <feColorMatrix
                                            in="SourceAlpha"
                                            type="matrix"
                                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                            result="hardAlpha"
                                        />
                                        <feMorphology
                                            radius="2"
                                            operator="dilate"
                                            in="SourceAlpha"
                                            result="effect1_dropShadow_99_34650"
                                        />
                                        <feOffset />
                                        <feGaussianBlur stdDeviation="2" />
                                        <feComposite
                                            in2="hardAlpha"
                                            operator="out"
                                        />
                                        <feColorMatrix
                                            type="matrix"
                                            values="0 0 0 0 0.921569 0 0 0 0 0 0 0 0 0 0.160784 0 0 0 0.2 0"
                                        />
                                        <feBlend
                                            mode="normal"
                                            in2="BackgroundImageFix"
                                            result="effect1_dropShadow_99_34650"
                                        />
                                        <feBlend
                                            mode="normal"
                                            in="SourceGraphic"
                                            in2="effect1_dropShadow_99_34650"
                                            result="shape"
                                        />
                                    </filter>
                                    <linearGradient
                                        id="paint0_linear_99_34650"
                                        x1="47.3571"
                                        y1="64.8659"
                                        x2="21.8571"
                                        y2="0.64286"
                                        gradientUnits="userSpaceOnUse"
                                    >
                                        <stop
                                            offset="0.451923"
                                            stop-color="#EB0029"
                                        />
                                        <stop offset="1" stop-color="white" />
                                    </linearGradient>
                                </defs>
                            </svg>
                            <div class="name">
                                {{ $t("layout.text79") }}
                            </div>
                            <div class="text">{{ $t("layout.text80") }}</div>
                        </li>
                        <li>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="72"
                                height="72"
                                viewBox="0 0 72 72"
                                fill="none"
                            >
                                <g filter="url(#filter0_d_99_34661)">
                                    <circle
                                        cx="36"
                                        cy="36"
                                        r="30"
                                        fill="url(#paint0_linear_99_34661)"
                                    />
                                </g>
                                <path
                                    d="M31.2495 40.0664H24.5076C23.6274 40.0664 23.0202 39.1812 23.3335 38.3553L30.0326 20.6879C30.1232 20.4488 30.284 20.2431 30.4936 20.0979C30.7032 19.9528 30.9518 19.875 31.2064 19.875H42.5109C43.4028 19.875 44.0109 20.7829 43.6742 21.6131L39.7735 31.2327H47.1167C48.1967 31.2327 48.7729 32.5117 48.0606 33.3271L30.0569 53.9389C29.1817 54.9411 27.5591 54.0727 27.8987 52.784L31.2495 40.0664Z"
                                    fill="white"
                                />
                                <defs>
                                    <filter
                                        id="filter0_d_99_34661"
                                        x="0"
                                        y="0"
                                        width="72"
                                        height="72"
                                        filterUnits="userSpaceOnUse"
                                        color-interpolation-filters="sRGB"
                                    >
                                        <feFlood
                                            flood-opacity="0"
                                            result="BackgroundImageFix"
                                        />
                                        <feColorMatrix
                                            in="SourceAlpha"
                                            type="matrix"
                                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                            result="hardAlpha"
                                        />
                                        <feMorphology
                                            radius="2"
                                            operator="dilate"
                                            in="SourceAlpha"
                                            result="effect1_dropShadow_99_34661"
                                        />
                                        <feOffset />
                                        <feGaussianBlur stdDeviation="2" />
                                        <feComposite
                                            in2="hardAlpha"
                                            operator="out"
                                        />
                                        <feColorMatrix
                                            type="matrix"
                                            values="0 0 0 0 0.921569 0 0 0 0 0 0 0 0 0 0.160784 0 0 0 0.2 0"
                                        />
                                        <feBlend
                                            mode="normal"
                                            in2="BackgroundImageFix"
                                            result="effect1_dropShadow_99_34661"
                                        />
                                        <feBlend
                                            mode="normal"
                                            in="SourceGraphic"
                                            in2="effect1_dropShadow_99_34661"
                                            result="shape"
                                        />
                                    </filter>
                                    <linearGradient
                                        id="paint0_linear_99_34661"
                                        x1="47.3571"
                                        y1="64.8659"
                                        x2="21.8571"
                                        y2="0.64286"
                                        gradientUnits="userSpaceOnUse"
                                    >
                                        <stop
                                            offset="0.451923"
                                            stop-color="#EB0029"
                                        />
                                        <stop offset="1" stop-color="white" />
                                    </linearGradient>
                                </defs>
                            </svg>
                            <div class="name">
                                {{ $t("layout.text81") }}
                            </div>
                            <div class="text">{{ $t("layout.text82") }}</div>
                        </li>
                        <li>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="72"
                                height="72"
                                viewBox="0 0 72 72"
                                fill="none"
                            >
                                <g filter="url(#filter0_d_99_34669)">
                                    <circle
                                        cx="36"
                                        cy="36"
                                        r="30"
                                        fill="url(#paint0_linear_99_34669)"
                                    />
                                </g>
                                <path
                                    d="M33.2929 18.75C25.4682 18.75 19.125 24.9902 19.125 32.6878C19.125 40.3854 25.4682 46.6257 33.2929 46.6257C41.1176 46.6257 47.4608 40.3854 47.4608 32.6878C47.4608 24.9902 41.1176 18.75 33.2929 18.75ZM42.9582 30.7927C42.4053 30.7751 41.9641 30.251 41.8576 29.6623C41.3762 26.9087 39.1681 24.7358 36.3691 24.263C35.7707 24.1574 35.2371 23.7234 35.22 23.1802C35.2006 22.6391 35.8937 22.178 36.7119 22.318C40.3448 22.9324 43.2116 25.7526 43.8354 29.3258C43.9769 30.13 43.5082 30.8118 42.9582 30.7927ZM52.2078 49.4247L45.6253 42.9499C44.6394 44.0957 43.494 45.103 42.219 45.9365L48.9862 52.5939C49.4311 53.0315 50.0139 53.25 50.5966 53.25C51.1794 53.25 51.7621 53.0315 52.207 52.5939C53.0975 51.7178 53.0975 50.2992 52.2078 49.4247Z"
                                    fill="white"
                                />
                                <defs>
                                    <filter
                                        id="filter0_d_99_34669"
                                        x="0"
                                        y="0"
                                        width="72"
                                        height="72"
                                        filterUnits="userSpaceOnUse"
                                        color-interpolation-filters="sRGB"
                                    >
                                        <feFlood
                                            flood-opacity="0"
                                            result="BackgroundImageFix"
                                        />
                                        <feColorMatrix
                                            in="SourceAlpha"
                                            type="matrix"
                                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                            result="hardAlpha"
                                        />
                                        <feMorphology
                                            radius="2"
                                            operator="dilate"
                                            in="SourceAlpha"
                                            result="effect1_dropShadow_99_34669"
                                        />
                                        <feOffset />
                                        <feGaussianBlur stdDeviation="2" />
                                        <feComposite
                                            in2="hardAlpha"
                                            operator="out"
                                        />
                                        <feColorMatrix
                                            type="matrix"
                                            values="0 0 0 0 0.921569 0 0 0 0 0 0 0 0 0 0.160784 0 0 0 0.2 0"
                                        />
                                        <feBlend
                                            mode="normal"
                                            in2="BackgroundImageFix"
                                            result="effect1_dropShadow_99_34669"
                                        />
                                        <feBlend
                                            mode="normal"
                                            in="SourceGraphic"
                                            in2="effect1_dropShadow_99_34669"
                                            result="shape"
                                        />
                                    </filter>
                                    <linearGradient
                                        id="paint0_linear_99_34669"
                                        x1="47.3571"
                                        y1="64.8659"
                                        x2="21.8571"
                                        y2="0.64286"
                                        gradientUnits="userSpaceOnUse"
                                    >
                                        <stop
                                            offset="0.451923"
                                            stop-color="#EB0029"
                                        />
                                        <stop offset="1" stop-color="white" />
                                    </linearGradient>
                                </defs>
                            </svg>
                            <div class="name">
                                {{ $t("layout.text83") }}
                            </div>
                            <div class="text">{{ $t("layout.text84") }}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.page {
    padding: 180px 15px 15px 15px;

    .van-form {
        padding: 24px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        .name {
            &.titleNmae {
                font-size: 32px;
                font-weight: 700;
                line-height: 44px; /* 137.5% */
            }
            &.payName {
                margin: 40px 0 0 0;
            }
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #000;
            font-size: 20px;
            font-weight: 700;
            .right {
                font-weight: 500;
                font-size: 20px;
                display: flex;
                align-items: center;
                span {
                    margin-left: 12px;
                    color: #eb0029;
                    font-size: 32px;
                    font-weight: 600;
                }
            }
            .pay {
                display: flex;
                align-items: center;
                span {
                    position: relative;
                    margin-right: 10px;
                    font-weight: 400;
                    font-size: 20px;
                    color: #949494;
                    &:after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background: #949494; /* 线条颜色 */
                        transform: rotate(2deg); /* 倾斜角度 */
                    }
                }
                .value {
                    color: #eb0029;
                    font-size: 36px;
                    font-weight: 900;
                }
            }
        }
        .name2 {
            margin-bottom: 20px;
            span {
                margin-left: 12px;
                color: #eb0029;
                font-family: "Noto Sans SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }
        .row {
            position: relative;
            min-height: 60px;
            // padding: 0 12px;
            font-weight: 400;
            font-size: 26px;
            color: #ffffff;

            .van-field {
                padding: 0;
                background: rgba(255, 255, 255, 0);
                &:deep(input) {
                    padding: 0 20px;
                    height: 60px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #000;
                    background: rgba(255, 255, 255, 0);
                    border-radius: 8px;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    box-sizing: content-box;

                    &::-webkit-input-placeholder {
                        color: #949494;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    &:-moz-placeholder {
                        color: #949494;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    &::-moz-placeholder {
                        color: #949494;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    &:-ms-input-placeholder {
                        color: #949494;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    &:focus {
                        border: 1px solid #eb0029;
                        background: #fff7f7;
                    }
                }
                &::after {
                    display: none;
                }
            }
            .timeBox {
                position: absolute;
                right: 0px;
                top: 0;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    margin-right: 10px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #eb0029;
                }
                .van-stepper {
                    position: relative;
                    background: transparent;
                    border-radius: 8px;
                    &::after {
                        position: absolute;
                        top: 16px;
                        right: 60px;
                        content: "";
                        display: block;
                        width: 1px;
                        height: 28px;
                        background: #d9d9d9;
                    }
                    &:deep(.van-stepper__input) {
                        display: none;
                    }
                    &:deep(.van-stepper__minus) {
                        height: 60px;
                        width: 60px;
                        border-radius: 0;
                        background: transparent;

                        &:before,
                        &:after {
                            // display: none;
                            color: #eb0029;
                            width: 30%;
                            height: 2px;
                        }
                    }
                    &:deep(.van-stepper__plus) {
                        height: 60px;
                        width: 60px;
                        border-radius: 0;
                        background: transparent;
                        &:before {
                            width: 30%;
                            height: 2px;
                        }
                        &:after {
                            height: 30%;
                            width: 2px;
                        }
                        &:before,
                        &:after {
                            // display: none;
                            color: #eb0029;
                            font-weight: bold;
                        }
                    }
                }
            }
            &.row2 {
                .van-cell {
                    // max-width: 240px;
                }
            }
        }
        .amountList {
            display: flex;
            margin: 16px 0 30px 0;
            span {
                margin-right: 8px;
                display: flex;
                padding: 9px 24px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                color: #000;
                font-size: 16px;
                font-weight: 400;
                box-sizing: border-box;
                border-radius: 20px;
                border: 1px solid #d9d9d9;
                cursor: pointer;
                &:last-child {
                    margin-right: 0;
                }
                &.cuttent {
                    color: #fff;
                    border: 1px solid #eb0029;
                    background: #eb0029;
                }
                &:hover {
                    color: #fff;
                    border: 1px solid #eb0029;
                    background: #eb0029;
                }
            }
        }
        .timeList {
            display: flex;
            margin: 12px 0 30px 0;
            span {
                margin-right: 8px;
                display: flex;
                padding: 9px 24px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                color: #000;
                font-size: 16px;
                font-weight: 400;
                box-sizing: border-box;
                border-radius: 20px;
                border: 1px solid #d9d9d9;
                cursor: pointer;
                &:last-child {
                    margin-right: 0;
                }
                &.cuttent {
                    color: #fff;
                    border: 1px solid #eb0029;
                    background: #eb0029;
                }
                &:hover {
                    color: #fff;
                    border: 1px solid #eb0029;
                    background: #eb0029;
                }
            }
        }
        .van-button {
            margin-top: 35px;
        }
    }

    .title {
        span {
            color: #000;
            font-size: 32px;
            font-weight: 700;
        }
        @media (max-width: 1000px) {
            & {
                span {
                    font-size: 20px;
                }
            }
        }
    }

    .Leasing {
        margin-top: 100px;
        ul {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &::after {
                position: absolute;
                left: 0;
                right: 0;
                margin: 0 auto;
                content: "";
                width: 1px;
                height: 115px;
                background: #ffccd5;
            }
            li {
                flex: 1;
                max-width: 570px;
                flex-shrink: 0;
                &::before {
                    display: block;
                    content: "";
                    width: 157px;
                    height: 70px;
                    background: url("@/assets/image/img3.svg");
                    background-position: top;
                    background-repeat: no-repeat;
                }
                &:last-child {
                    &::before {
                        background: url("@/assets/image/img4.svg");
                        background-position: top;
                        background-repeat: no-repeat;
                    }
                }
                .label {
                    color: #000;
                    font-size: 20px;
                    font-weight: 700;
                }
                .text {
                    margin-top: 12px;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: normal;
                }
            }
        }
    }
    .introduce {
        margin-top: 100px;
        .block {
            ul {
                display: flex;
                align-items: center;
                justify-content: space-between;
                li {
                    flex: 1;
                    padding: 24px 0;
                    text-align: center;
                    flex-shrink: 0;
                    border-radius: 20px;
                    border: 1px solid #d9d9d9;
                    box-sizing: border-box;
                    &:nth-child(2) {
                        margin: 0 20px;
                    }
                    .name {
                        margin-top: 16px;
                        color: #000;
                        font-size: 20px;
                        font-weight: 700;
                    }
                    .text {
                        margin-top: 12px;
                        font-size: 16px;
                        font-weight: 400;
                    }
                }
            }
        }
    }
    .OperationProcess {
        margin-top: 40px;
        padding: 24px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 45px;
            padding-bottom: 16px;
            li {
                display: flex;
                align-items: center;
                font-weight: 500;
                font-size: 16px;
                span {
                    margin-right: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    width: 22px;
                    height: 22px;
                    font-size: 20px;
                    flex-shrink: 0;
                    background: #eb0029;
                    border-radius: 22px;
                }
            }
            i {
                flex: 1;
                margin: 0 26px;
                // margin-top: 8px;
                height: 1px;
                display: block;
                border-bottom: 1px dashed #eb0029;
            }
        }
    }

    @media (max-width: 1000px) {
        & {
            padding: 98px 15px 15px 15px;
            .van-form {
                padding: 30px 15px;
                .name {
                    display: block;
                    font-size: 16px;
                    .dc {
                        justify-content: flex-start;
                    }
                    .pay {
                        margin-top: 12px;
                        display: flex;
                        justify-content: flex-end;
                        flex-direction: row-reverse;
                        align-items: flex-end;
                        .value {
                            font-size: 24px;
                        }
                        span {
                            font-size: 14px;
                        }
                    }
                    &.titleNmae {
                        margin-bottom: 24px;
                        line-height: 1;
                        display: block;
                        font-size: 20px;
                    }
                    .right {
                        display: block;
                        margin-top: 24px;
                        font-size: 16px;
                        span {
                            height: 44px;
                            line-height: 44px;
                            margin: 0;
                            display: block;
                            font-size: 20px;
                        }
                    }
                    &.name2 {
                        margin-bottom: 12px;
                        span {
                            font-size: 12px;
                        }
                    }
                }
                .row {
                    .address {
                        &:deep(input) {
                            font-size: 15px;
                        }
                    }
                }
                .amountList {
                    margin: 0;
                    margin-bottom: 24px;
                    flex-wrap: wrap;
                    span {
                        margin-top: 12px;
                    }
                }
                .timeList {
                    margin: 0;
                    margin-bottom: 24px;
                    flex-wrap: wrap;
                    span {
                        margin-top: 12px;
                    }
                }
                .van-button {
                    margin-top: 15px;
                }
            }
            .OperationProcess {
                text-align: center;
                ul {
                    display: block;
                    i {
                        margin: 14px auto;
                        width: 1px;
                        height: 28px;
                        border-left: 1px dashed #eb0029;
                    }
                    li {
                        display: block;
                        span {
                            margin: 0 auto 8px auto;
                            justify-content: center;
                        }
                    }
                }
            }
            .Leasing {
                ul {
                    padding: 0 40px;
                    display: block;
                    text-align: center;
                    &::after {
                        display: none;
                    }
                    li {
                        max-width: 100% !important;
                        &::before {
                            margin: 0 auto;
                        }
                        &:last-child {
                            margin-top: 60px;
                        }
                    }
                }
            }
            .introduce {
                .block {
                    ul {
                        display: block;
                        li {
                            margin-bottom: 16px;
                            &:last-child {
                                margin-bottom: 0;
                            }
                            &:nth-child(2) {
                                margin: 0 0 16px 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
